<template>
  <div class="article-list">
			<van-swipe-cell  :disabled="disableSwiper">
        <van-cell  center to="/show">
          <h3 slot="title" class="list-title">文章标题</h3>
          <div slot="label" class="list-desc">
            <p>
              述内容文章描述内容文述内容文章描述内容文章描述内容文章描述内容文
            </p>
            <p class="desc">
              <span><van-icon name="eye" />收藏(xxx)</span>
              <span><van-icon name="good-job" />点赞(2603)</span>
            </p>
          </div>
          <img class="list-img" src="@/assets/imgs/test.jpeg" alt="" />
        </van-cell>
        <template #right>
            <!-- <van-button square type="danger" text="取消" /> -->
            <slot></slot>
          </template>
			</van-swipe-cell>
      <van-swipe-cell  :disabled="disableSwiper">
        <van-cell  center to="/show">
          <h3 slot="title" class="list-title">文章标题</h3>
          <div slot="label" class="list-desc">
            <p>
              述内容文章描述内容文述内容文章描述内容文章描述内容文章描述内容文
            </p>
            <p class="desc">
              <span><van-icon name="eye" />收藏(xxx)</span>
              <span><van-icon name="good-job" />点赞(2603)</span>
            </p>
          </div>
          <img class="list-img" src="@/assets/imgs/test.jpeg" alt="" />
        </van-cell>
        <template #right>
            <!-- <van-button square type="danger" text="取消" /> -->
            <slot></slot>
          </template>
			</van-swipe-cell>
      <van-swipe-cell  :disabled="disableSwiper">
        <van-cell  center to="/show">
          <h3 slot="title" class="list-title">文章标题</h3>
          <div slot="label" class="list-desc">
            <p>
              述内容文章描述内容文述内容文章描述内容文章描述内容文章描述内容文
            </p>
            <p class="desc">
              <span><van-icon name="eye" />收藏(xxx)</span>
              <span><van-icon name="good-job" />点赞(2603)</span>
            </p>
          </div>
          <img class="list-img" src="@/assets/imgs/test.jpeg" alt="" />
        </van-cell>
        <template #right>
            <!-- <van-button square type="danger" text="取消" /> -->
            <slot></slot>
          </template>
			</van-swipe-cell>
      <van-swipe-cell  :disabled="disableSwiper">
        <van-cell  center to="/show">
          <h3 slot="title" class="list-title">文章标题</h3>
          <div slot="label" class="list-desc">
            <p>
              述内容文章描述内容文述内容文章描述内容文章描述内容文章描述内容文
            </p>
            <p class="desc">
              <span><van-icon name="eye" />收藏(xxx)</span>
              <span><van-icon name="good-job" />点赞(2603)</span>
            </p>
          </div>
          <img class="list-img" src="@/assets/imgs/test.jpeg" alt="" />
        </van-cell>
        <template #right>
            <!-- <van-button square type="danger" text="取消" /> -->
            <slot></slot>
          </template>
			</van-swipe-cell>
		</div>
</template>

<script>
export default {
  name:'ArticleList',
  props:{
    // 是否禁止滑动
    disableSwiper:{
      type:Boolean,
      default:true
    }
  }
}
</script>
<style scoped lang="less">
.article-list{
  margin-top: 10px;
  .list-title {
    font-size: 32px;
    color: #222;
    font-weight: normal;
  }
  .list-desc {
    font-size: 28px;
    .desc {
      color: #aaa;
      font-size: 24px;
      span {
        margin-right: 20px;
      }
    }
  }
  /deep/  .van-swipe-cell__value {
    width: 260px;
    flex: unset;
  }
  .list-img {
    width: 240px;
  }
  /deep/ .van-swipe-cell__right{
    .van-button{
      height: 100%;
    }
  }
}
</style>